<template>
  <!--  -->
  <div class="search1">
    <input type="search" placeholder="搜索..." />
    <router-link to="/mine"><button>取消</button></router-link>
    <img src="../mine/img/宠派19.png" alt="" />
  </div>
  <!--  -->
  <div class="barre2">
    <div class="bar">最近搜索</div>
    <div class="rre" @click="fun">清除搜索记录</div>
    <div
      class="taigg"
      :style="figer ? { display: 'none' } : { display: 'block' }"
    >
      <div class="taiger">
        <img src="../mine/img/WechatIMG63389.jpeg" alt="" />
        <h4>泰迪</h4>
      </div>
      <div class="taiger1">
        <img src="../mine/img/WechatIMG63389.jpeg" alt="" />
        <h4>阿拉斯加</h4>
      </div>
      <div class="taiger2">
        <img src="../mine/img/WechatIMG63389.jpeg" alt="" />
        <h4>牧马</h4>
      </div>
    </div>
  </div>
  <!--  -->
  <div class="barre3">
    <div class="hot" :class="figer ? 'active' : ''">热门宠物</div>
    <div class="cat">
      <img src="../mine/img/cat1.webp" alt="" />
      <p>斑猫</p>
      <span>美国短尾猫</span>
    </div>
    <div class="cat1">
      <img src="../mine/img/cat2.webp" alt="" />
      <p>小狗</p>
      <span>帕格</span>
    </div>
  </div>
  <!--  -->
  <div class="barre4">
    <div class="photo">最近照片</div>
  </div>
  <!--  -->
  <div class="mimi"  @click="fun">
   <div class="ww" v-for="(item, index) in infor" :key="index" >
      <img :src="item.url" alt=""  :class="item.class"  />
   </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "moon",
  setup() {
    let figer = ref(false);
    function fun() {
      figer.value = true;
    }
    return {
      fun,
      figer,
      infor,
    };
  },
};
let infor = reactive([
  {
    url: require("../mine/img/cat.webp"),
    class:"qq"
  },
  {
    url: require("../mine/img/cat1.webp"),
    class:"tt"
  },
  {
    url: require("../mine/img/dog.webp"),
    class:"ee"
  },
  {
    url: require("../mine/img/dog2.webp"),
    class:'rr'
  },
]);
</script>

<style land="less"  scoped>
.tt{
  height: 196px;
}
.ee{
  width: 30px;
  height: 176px;
}
.rr{
  margin-top: -32px;
  height: 208px;
}
.ww{
   width: 179px;
   height: 200px;
   margin-bottom: 50px;
  border-radius: 5px 5px 5px 5px;
}
.mimi img {
  width: 179px;

  border-radius: 5px 5px 5px 5px;
}
.mimi{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.hot.active {
  display: none;
}
.barre4 {
  width: 100%;
  height: 56px;
  position: relative;
  top: 31px;
}
.photo {
  position: absolute;
  left: 26px;
  font-size: 14px;
  font-weight: 300;
}
.photo1 {
  width: 100%;
  height: 124px;
  position: absolute;
  top: 35px;
}
.photo1 img {
  width: 33%;
  height: 100%;
}

.barre3 {
  width: 100%;
  height: 260px;
  position: relative;
  top: 22px;
}
.hot {
  position: absolute;
  left: 29px;
  font-size: 13px;
  font-weight: 400;
}
.cat {
  width: 140px;
  height: 180px;
  position: absolute;
  top: 30px;
  left: 26px;
}
.cat p {
  width: 22%;
  height: 20px;
  position: absolute;
  top: 183px;
  font-size: 14px;
  font-weight: 400;
}
.cat span {
  width: 54%;
  height: 20px;
  position: absolute;
  top: 203px;
  left: 0px;
  font-size: 13px;
  font-weight: 400;
  color: #686464;
}
.cat img {
  width: 140px;
  height: 180px;
  border-radius: 5px 5px 5px 5px;
}
.cat1 {
  width: 140px;
  height: 180px;
  position: absolute;
  top: 30px;
  left: 195px;
}
.cat1 p {
  width: 22%;
  height: 20px;
  position: absolute;
  top: 183px;
  font-size: 14px;
  font-weight: 400;
}
.cat1 span {
  width: 54%;
  height: 20px;
  position: absolute;
  top: 203px;
  left: 0px;
  font-size: 13px;
  font-weight: 400;
  color: #686464;
}
.cat1 img {
  width: 100%;
  height: 100%;
  border-radius: 5px 5px 5px 5px;
}
.taigg {
  /* position: relative; */
  height: 150px;
}
.barre2 {
  width: 100%;
  /* height: 150px; */
  position: relative;
  top: 21px;
}
.taiger {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 46px;
  left: 26px;
}
.taiger img {
  width: 100%;
  height: 100%;
}
.taiger h4 {
  width: 51%;
  height: 20px;
  position: absolute;
  right: 14px;
  top: 67px;
  font-size: 14px;
  font-weight: 400;
}
.taiger1 {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 46px;
  left: 105px;
  background-color: aquamarine;
}
.taiger1 img {
  width: 100%;
  height: 100%;
}
.taiger1 h4 {
  width: 98%;
  height: 20px;
  position: absolute;
  right: -1px;
  top: 67px;
  font-size: 14px;
  font-weight: 400;
}
.taiger2 {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 46px;
  left: 185px;
  background-color: aquamarine;
}
.taiger2 img {
  width: 100%;
  height: 100%;
}
.taiger2 h4 {
  width: 51%;
  height: 20px;
  position: absolute;
  right: 14px;
  top: 67px;
  font-size: 14px;
  font-weight: 400;
}
.bar {
  width: 20%;
  position: absolute;
  top: 12px;
  font-size: 12px;
  font-weight: 400;
  left: 26px;
}
.rre {
  width: 24%;
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 14px;
  color: rgb(100, 100, 230);
}

.search1 {
  width: 100%;
  height: 70px;
  position: relative;
}
.search1 input {
  position: absolute;
  padding-left: 48px;
  width: 284px;
  height: 48px;
  border: 0;
  top: 10px;
  left: 23px;
  outline: none;
  background-color: rgb(246, 248, 250);
}
.search1 img {
  width: 21px;
  position: absolute;
  border: 0;
  top: 22px;
  left: 39px;
  outline: none;
}
.search1 button {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 49px;
  height: 32px;
  border: 0;
  background-color: white;
}
</style>